Skip to main content

Parallel Queries

“并行”查询是同时执行的查询，以最大程度地提高获取并发性。

Manual Parallel Queries​

手动并行查询

当并行查询的数量不变时，使用并行查询不需要额外的努力。只需在TanStack Query的useQuery和useInfiniteQuery钩子旁边使用任意数量的钩子即可！

tsx
function App() {
// 以下查询将并行执行
const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })
const projectsQuery = useQuery({ queryKey: ['projects'], queryFn: fetchProjects })
...
}

在使用悬挂模式的React Query中，这种并行性模式不起作用，因为第一个查询将在其他查询运行之前内部抛出一个Promise并挂起组件。为了解决这个问题，您需要使用useQueries钩子（推荐使用）或为每个useQuery实例编写单独的组件来协调自己的并行性（这样做不太理想）。

Dynamic Parallel Queries with useQueries​

使用useQueries进行动态并行查询

如果您需要从渲染到渲染的查询数量发生变化，则无法使用手动查询，因为那将违反钩子的规则。相反，TanStack Query提供了useQueries钩子，您可以使用它来动态并行执行任意数量的查询。

useQueries接受一个选项对象，其中queries键的值是一个查询对象数组。它返回一个查询结果数组：

function App(users) {
  const useQueries =  useQueries({
    queries: users.map((user) => {
      return {
        queryKey: ['user', user.id],
        queryFn: () => fetchUserById(user.id)
      }
    })
  })
}